<template>
	<navbar title="商品详情" :isBack="true"></navbar>
	<view class="">
		<u-swiper :list="swiperList" height="750" :borderRadius="0"></u-swiper>
	</view>
	<view class="" style="padding: 30rpx;">
		<view class="" style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
			<view class="" style="display: flex;align-items: flex-end;">
				<view class="" style="color: #E83F3F;font-weight: bold;">
					<span style="font-size: 28rpx;">￥</span>
					<span style="font-size: 48rpx;">{{info.price}}</span>
				</view>
				<view class=""
					style="margin-left: 30rpx;color: #9A9A9A;font-size: 26rpx;text-decoration: line-through;margin-bottom: 5rpx;">
					<span>￥</span>
					<span>{{info.cost_price}}</span>
				</view>
			</view>

		</view>
		<view class="ellipsis-2" style="font-size: 34rpx;font-weight: bold;margin-top: 30rpx;">
			{{info.name}}
		</view>
	</view>
	<view class="" style="width: 100%;height: 12rpx;background-color: #FAFAFA;">

	</view>
	<view class="" style="text-align: center;padding-top: 30rpx;font-size: 30rpx;font-weight: bold;">
		—— <span style="font-size: 32rpx;">详情</span> ——
	</view>
	<view class="" style="text-align: center;padding-bottom: 124rpx;padding-top: 20rpx;" v-html="info.detail">

	</view>
	<view class="footer">
		<view class="footer_icon">

			<view class="footer_icon_car" @tap="cart">
				<image class="footer_icon_carI" src="../../static/goods/cart.png" mode="aspectFit"></image>
				<view class="footer_icon_carT">购物车</view>
				<view class="footer_icon_carNum" v-if="shopNum">{{shopNum}}</view>
			</view>
			<view class=""
				style="display: flex;align-items: center;flex-direction: column;justify-content: center;margin-left: 60rpx;"
				@tap="share">
				<image style="width: 36rpx;height: 36rpx;" src="../../static/image/share1.png" mode="aspectFill">
				</image>
				<view class="" style="font-size: 26rpx;margin-top: 2rpx;">
					分享
				</view>
			</view>
		</view>
		<view class="footer_btn">
			<view class="btns" @tap="addBuy(1)">加入购物车</view>
			<view class="btns2" @tap="addBuy(2)">立即购买</view>
		</view>
	</view>
	<u-popup v-model="popShow" mode="bottom" border-radius="20" closeable @close="popupClose">
		<view class="" style="padding: 30rpx;">
			<view class="" style="width: 100%;text-align: center;font-siez:32rpx;font-weight: bold;">
				选择规格
			</view>
			<view class="" style="margin-top: 40rpx;display: flex;">
				<view class="">
					<image :src="chooseData.chooseImage ? chooseData.chooseImage : info.cover"
						style="width: 192rpx;height: 198rpx;border-radius: 10rpx;" mode="aspectFill"></image>
				</view>

				<view class=""
					style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;height: 198rpx;">
					<view class="ellipsis-2" style="font-size: 28rpx;">
						{{info.name}}
					</view>
					<view class="">
						<span style="font-weight: bold;">￥</span>
						<span style="font-size: 40rpx;font-weight: bold;">{{info.price}}</span>
					</view>
					<view class="" style="font-size: 24rpx;color: #747474;">
						已选：“{{chooseData.chooseShop}}” - 库存：{{chooseData.stock}}
					</view>
				</view>
			</view>
			<view class="" style="margin-top: 40rpx;" v-if="info.size_info.title.length > 0">
				<!-- 颜色 -->
				<view class="" style="font-size: 30rpx;">
					{{info.size_info.title[0].name}}
				</view>
				<view class="" style="margin-top: 24rpx;display: flex;flex-wrap: wrap;">
					<view
						:class="[(keys + 1) % 4 ?'' : 'itemnotop',item.choose == 0 ? 'noActive':item.choose == 1 ? 'active':'disabled']"
						style="padding: 10rpx 30rpx;margin: 20rpx 20rpx 0 0;border-radius: 10rpx;"
						@tap="changeSize(0,item,keys)" v-for="(item,keys) in info.size_info.title[0].children">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="" style="margin-top: 40rpx;" v-if="info.size_info.title.length > 1">
				<!-- 尺码 -->
				<view class="" style="font-size: 30rpx;">
					{{info.size_info.title[1].name}}
				</view>
				<view class="" style="margin-top: 24rpx;display: flex;flex-wrap: wrap;">
					<view
						:class="[(keys + 1) % 4 ?'' : 'itemnotop',item.choose == 0 ? 'noActive':item.choose == 1 ? 'active':'disabled']"
						style="padding: 10rpx 30rpx;margin: 20rpx 20rpx 0 0;border-radius: 10rpx;"
						@tap="changeSize(1,item,keys)" v-for="(item,keys) in info.size_info.title[1].children">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class=""
				style="margin-top: 40rpx;width: 100%;display: flex;align-items: center;justify-content: space-between;">
				<view class="" style="font-size: 30rpx;">
					选择数量
				</view>
				<view class="" style="display: flex;align-items: center;">
					<view class="" @tap="addNum(0)"
						style="width: 48rpx;height: 48rpx;background-color: #F3F4F4;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;color: #9A9A9A;">

						<view class="" style="width: 18rpx;height: 1rpx;border-bottom: 4rpx solid #666666;">

						</view>
					</view>
					<view class="" style="margin: 0 50rpx;">
						{{num}}
					</view>
					<view class="" @tap="addNum(1)"
						style="width: 48rpx;height: 48rpx;background-color: #E83F3F;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;color: white;font-size: 42rpx;padding-bottom: 10rpx;">
						+
					</view>
				</view>
			</view>
			<view class="" @tap="buy(popIndex)"
				style="width: 100%;height: 98rpx;display: flex;justify-content: center;align-items: center;background: linear-gradient( 90deg, #5062A7 0%, #354678 100%);border-radius: 10rpx;color: white;font-size: 32rpx;margin-top: 40rpx;">
				<span v-if="popIndex == 1">加入购物车</span>
				<span v-if="popIndex == 2">立即购买</span>
			</view>
		</view>

	</u-popup>
	<!-- 分享弹窗 -->
	<view class="pupup">
		<u-popup v-model="shareShow" border-radius="20" mode="bottom">
			<view class="" v-if="posterShow"
				style="width: 100%;display: flex;justify-content: center;margin-bottom: 30rpx;flex-direction: column;align-items: center;">
				<view class=""
					style="width: 680rpx;height: 870rpx;display: flex;justify-content: center;align-items: center;">
					<image :src="info.shareImg" style="width: 600rpx;height: 820rpx;border-radius: 30rpx;"
						mode="aspectFit"></image>
				</view>
				<view class="" @tap="downImage"
					style="display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #405EEC;padding: 20rpx 60rpx;border-radius: 50rpx;">

					<view class="" style="color:white;font-size: 26rpx;">
						保存海报到相册
					</view>
				</view>
			</view>

			<view class="" style="width: 100%;padding-top: 40rpx;background-color: white;padding-bottom: 30rpx;">
				<view class="" style="width: 100%;padding: 0 130rpx;display: flex;justify-content:space-between;">
					<button open-type="share" style="background-color: white;margin: 0;line-height: 1;">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: center;align-items: center">
							<image src="../../static/image/weixin.png" style="width:100rpx;height: 100rpx;"
								mode="aspectFill"></image>
							<view class="" style="margin-top: 30rpx;color: #000000;font-size: 28rpx;">
								分享给好友
							</view>
						</view>
					</button>
					<view class="" @tap="posterShow = true"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center">
						<image src="../../static/image/pic.png" style="width:100rpx;height: 100rpx;" mode="aspectFill">
						</image>
						<view class="" style="margin-top: 30rpx;color: #000000;">
							分享海报
						</view>
					</view>
					<!-- <view class="" @tap="downImage"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center">
						<image src="../../static/image/pic.png" style="width:100rpx;height: 100rpx;" mode="aspectFill">
						</image>
						<view class="" style="margin-top: 30rpx;color: #000000;">
							保存海报到相册
						</view>
					</view> -->
				</view>
				<view class="" style="margin-top: 40rpx;width: 100%;height: 12rpx;background-color: #F9F9F9;">

				</view>
				<view class="" @tap="shareShow = false" style="margin-top: 30rpx;text-align: center;color: #333333;">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
	import { shopGetGoodsInfo, shopAddCart, shopCartNum } from '@/service/api/shop'
	import tools from '@/utils/tools'
	const popShow = ref(false)
	const shareShow = ref(false)
	const posterShow = ref(false)
	const popIndex = ref(0)
	const info = ref({
		size_info: {
			data: [],
			title: [{
				name: ""
			}, {
				name: ""
			}]
		}
	}) as any
	const num = ref(1)
	const id = ref('')
	const str = ref('')
	const str2 = ref('')
	const shopNum = ref('')
	const token = ref('')
	const swiperList = ref([])
	const chooseData = reactive(
		{
			chooseName: '',
			chooseImage: '',
			choosePrice: 0,
			chooseShop: '',
			stock: 0
		})
	onLoad((opt) => {
		if (opt.scene) {
			id.value = opt.scene
		}
		if (opt.id) {
			id.value = opt.id;
		}


	})
	onShow(() => {
		getData()
	})
	const getData = async () => {
		const res = await shopGetGoodsInfo({ id: id.value });
		info.value = res.msg;
		swiperList.value = res.msg.images
		getShopNum()
		// token.value = getToken();
		// if (token.value != undefined && token.value != '') {

		// }else{
		// 	tools.navTo('/pagesA/mine/login')
		// }

	}
	const getToken = () => {
		return tools.getStorage('token');
	}
	//分享
	const share = () => {
		shareShow.value = true;
	}
	//保存图片
	const downImage = () => {
		tools.downImage(info.value.shareImg)
	}
	const addBuy = (i) => {
		//1是加入购物车 2是购买
		popShow.value = true;
		popIndex.value = i;
	}
	//弹窗关闭事件
	const popupClose = () => {
		for (let i = 0; i < info.value.size_info.title.length; i++) {

			for (let j = 0; j < info.value.size_info.title[i].children.length; j++) {
				info.value.size_info.title[i].children[j].choose = 0;
			}
		}
	}
	//购买
	const buy = async (index : number) => {
		//1是加入购物车 2是购买

		let title = info.value.size_info.title

		if (title.length == 0) return tools.showToast('数据错误请重新进入')
		if (title.length == 2 && (!str.value || !str2.value)) return tools.showToast('请选择完整规格')
		if (title.length == 1 && (!str.value && !str2.value)) return tools.showToast('请选择完整规格')
		if (num.value == 0) return tools.showToast('库存不足')

		if (index == 2) {

			tools.navTo('/pagesB/goods/confirmOrder?goods_id=' + id.value + '&num=' + num.value + '&specs=' + chooseData.chooseShop)
		} else {
			let param = {
				goods_id: id.value,
				num: num.value,
				specs: chooseData.chooseShop
			}
			const res = await shopAddCart(param);
			if (res.code == 1) {
				tools.showToast(res.msg)
				getShopNum()
				popShow.value = false;
			}
			console.log(res);
		}
		popShow.value = false
	}
	//购物车
	const cart = () => {
		tools.navTo('/pagesB/goods/shopCart')
	}
	const addNum = (i : number) => {
		if (i) {
			if (chooseData.stock <= num.value) {
				return;
			}
			//加
			num.value++;
		} else {
			//减
			if (num.value == 1) return
			num.value--
		}
	}
	//获取购物车数量
	const getShopNum = async () => {
		const res = await shopCartNum('')
		shopNum.value = res.msg
	}
	//选择规格
	const changeSize = (index, item, keys) => {
		//index是0 颜色 1是尺码
		// choose 0(可选但未选中) 1(选中) 2(不可选)
		//未选中不走
		if (info.value.size_info.title[index].children[keys].choose == 2) return false;
		//有两个选项的时候执行
		if (info.value.size_info.title.length > 1) {
			reduction(index, item, keys)
			//展示商品的价格
			if (getshopinfo().price != 0) {
				chooseData.choosePrice = Number(Number(getshopinfo().price).toFixed(2))
				chooseData.chooseImage = getshopinfo().icon
			} else {
				chooseData.choosePrice = Number(info.value.price)
			}
			chooseData.stock = getshopinfo().stock
			num.value = 1;

		} else {
			// 一个选项
			reductionOne(index, item, keys)
			//展示商品的价格
			if (getshopinfo().price != 0) {
				chooseData.choosePrice = Number(Number(getshopinfo().price).toFixed(2))
				chooseData.chooseImage = getshopinfo().icon
			} else {
				chooseData.choosePrice = Number(info.value.price)
			}
			chooseData.stock = getshopinfo().stock
			num.value = chooseData.stock ? 1 : 0;

		}
	}
	//判断选中
	const reduction = (index, item, keys) => {
		// index是选中哪一项的下表 item是选中的子属姓，keys是子属性的下标
		//取消选中
		if (info.value.size_info.title[index].children[keys].choose == 1) {
			//把点击的选项赋值为0待选
			info.value.size_info.title[index].children[keys].choose = 0;
			if (index == 0) {
				str.value = '';
			} else {
				str2.value = '';
			}
			//选中名称的方法判定
			chooseData.chooseShop = determine();
			// 反向遍历另一个数组赋值0
			return asd(index);
		}
		// 选中
		if (info.value.size_info.title[index].children[keys].choose == 0) {
			info.value.size_info.title[index].children.forEach((val, k) => {
				info.value.size_info.title[index].children[k].choose = info.value.size_info.title[index]
					.children[k].choose == 2 ? 2 : 0;
			})
			info.value.size_info.title[index].children[keys].choose = 1;
			if (index == 0) {
				str.value = item.name;
			} else {
				str2.value = item.name;
			}
			chooseData.chooseShop = determine();
			return combination(info.value.size_info.title[index].name, info.value.size_info.title[index]
				.children[keys].name, index);
		}
	}
	//取消选择
	const asd = (key) => {
		let key2 = key ? 0 : 1;
		let title = info.value.size_info.title[key2];
		title.children.forEach((item3, k) => {
			info.value.size_info.title[key2].children[k].choose = info.value.size_info.title[key2].children[
				k].choose != 1 ? 0 : 1;
		})
	}
	// 选中执行
	const combination = (main, secondary, key) => {
		let data = []
		let key2 = key ? 0 : 1;
		let title = info.value.size_info.title[key2];
		info.value.size_info.data.forEach(item => {
			item.forEach(item2 => {
				if (item2[main] == secondary) {
					data.push(item2)
				}
			})
		})
		title.children.forEach((item3, k) => {
			data.forEach((item4) => {
				if (item4[title.name] == item3.name) {
					if (item4.stock == 0) {
						//库存为0不能选择
						info.value.size_info.title[key2].children[k].choose = 2;
					} else {
						// 如果等于选中了就给他赋值0
						info.value.size_info.title[key2].children[k].choose = info.value.size_info
							.title[key2].children[k].choose != 1 ? 0 : 1;
					}
				}
			})
		})
	}
	//返回选中的商品名字
	const determine = () => {
		if (str.value && str2.value) return str.value + '-' + str2.value
		if (str.value && !str2.value) return str.value
		if (!str.value && str2.value) return str2.value
		if (!str.value && !str2.value) return '未选中'
	}
	// 获取选择的其他商品信息
	const getshopinfo = () => {
		let data = {
			price: 0,
			stock: 0,
			icon: info.value.cover
		}
		info.value.size_info.data.forEach(item => {
			item.forEach(item2 => {
				if (item2.name == chooseData.chooseShop) {
					data = item2
				}
			})
		})
		return data
	}
	//单个选项时执行
	const reductionOne = (index, item, keys) => {
		// index是选中哪一项的下表 item是选中的子属姓，keys是子属性的下标
		//取消选中
		if (info.value.size_info.title[index].children[keys].choose == 1) {
			//把点击的选项赋值为0待选
			info.value.size_info.title[index].children[keys].choose = 0;
			if (index == 0) {
				str.value = '';
			} else {
				str2.value = '';
			}
			//选中名称的方法判定
			chooseData.chooseShop = determine();
			return
		}
		// 选中
		if (info.value.size_info.title[index].children[keys].choose == 0) {
			info.value.size_info.title[index].children.forEach((val, k) => {
				info.value.size_info.title[index].children[k].choose = info.value.size_info.title[index]
					.children[k].choose == 2 ? 2 : 0;
			})
			info.value.size_info.title[index].children[keys].choose = 1;
			if (index == 0) {
				str.value = item.name;
			} else {
				str2.value = item.name;
			}
			chooseData.chooseShop = determine();
		}
	}
</script>

<style scoped lang="scss">
	.pupup {
		:deep(.u-drawer .u-drawer-content) {
			background-color: rgba(255, 255, 255, 0) !important;
		}
	}

	.itemnotop {
		margin-right: 0;
	}

	.active {
		background-color: #3E5088;
		border: 1rpx solid #3E5088;
		color: white;
	}

	.noActive {
		background-color: white;
		border: 1rpx solid #DBDBDB;

		color: #333333;
	}

	.disabled {
		background-color: #F3F4F4;
		color: #909090;
		border: 1rpx solid #DBDBDB;
	}

	.ellipsis-2 {
		// 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。

		//文本超出部分以...形式展示
		text-overflow: -o-ellipsis-lastline;
		//整体超出部分隐藏
		overflow: hidden;
		//文本超出部分以...形式展示，同第一行样式代码
		text-overflow: ellipsis;
		//display 块级元素展示
		display: -webkit-box;
		//设置文本行数为2行
		-webkit-line-clamp: 2;
		//设置文本行数为2行
		line-clamp: 2;
		//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-box-orient: vertical;

	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 144upx;
		background-color: #ffffff;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0 40rpx 0;

		.footer_btn {
			margin-right: 30rpx;
			display: flex;
			align-items: center;

			.btns {
				text-align: center;
				// width: 268rpx;
				padding: 0 50rpx;
				line-height: 90rpx;
				color: #000000;
				background-color: #F3F4F4;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;

			}

			.btns2 {
				text-align: center;
				// width: 264rpx;
				line-height: 90rpx;
				padding: 0 50rpx;
				color: white;
				background: linear-gradient(90deg, #5062A7 0%, #354678 100%);
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
		}

		.footer_icon {

			display: flex;
			align-items: center;

			.footer_icon_home {
				display: flex;
				flex-direction: column;
				align-items: center;

				.footer_icon_homeI {
					width: 48rpx;
					height: 48rpx;
				}

				.footer_icon_homeT {
					font-size: 28rpx;
					color: #000000;
				}
			}

			.footer_icon_car {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				margin-left: 40rpx;

				.footer_icon_carI {
					width: 40rpx;
					height: 40rpx;
				}

				.footer_icon_carT {
					font-size: 26rpx;
					color: #000000;
				}

				.footer_icon_carNum {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					border-radius: 50%;
					background-color: #F2672B;
					font-size: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 45rpx;
					height: 45rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>